<template>
    <div class="box" :style="{height : innerHeight}">
        <div>
            <van-nav-bar left-arrow @click-left="back" />
        </div>
        <div class="text">
            <span><img class="logo" src="https://cdn3.axureshop.com/demo/1525603/images/%E9%80%89%E6%8B%A9%E5%BA%97%E9%93%BA/u1066.png" alt="">
                小默外卖商家中心</span>
            <p>请选择店铺开始营业</p>
        </div>

        <div class="shop">
            <div class="shopLogo"></div>
            <div></div>
        </div>


    <div class="shops-box">
        <div class="store" v-for="item in data" :key="item.id"  @click="SelectStore(item)">
          <div class="benji"  v-show="item.show">本机</div>
          <div class="imgBox">
            <img :src=item.url />
          </div>
          <div class="store-message">
            <div class="shop-name">{{item.name}}</div>
            <div class="phone">接单:{{item.phone}}</div>
          </div>
        </div>
    </div>

        <div class="CreateNewStore" @click="CreateNewStore"> 
            <div class="addShopImgBox">
                <img class="addShop1" src="https://cdn3.axureshop.com/demo/1525603/images/%E5%88%87%E6%8D%A2%E5%BA%97%E9%93%BA/u14414.png" alt="">
                <img class="addShop2" src="https://cdn3.axureshop.com/demo/1525603/images/%E5%88%87%E6%8D%A2%E5%BA%97%E9%93%BA/u14415.png" alt="">
            </div>
            <div class="addShopText"><p>我要创建新店</p></div>
        </div>



        <div class="prompt">一台手机同时只能支持一个店铺在线营业</div>
    </div>


</template>

<script>
import Vue from 'vue';
import { Dialog } from 'vant';

// 全局注册
Vue.use(Dialog);
    export default {
    name : 'SwitchStores',
    components:{
        
    },
    data(){
        return{
            innerHeight:'',
            data: [    //后端获取店铺数据 
                {id:1,
                name: "默林如斯广东粉肠早餐店(凤凰广场店)",
                phone: "+8613612345678",
                url: "https://cdn3.axureshop.com/demo/1525603/images/%E9%80%89%E6%8B%A9%E5%BA%97%E9%93%BA/u1063.png",
                show:true
                }
            ]
        }
    },
    created(){
        this.innerHeight=window.innerHeight+'px'
    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        SelectStore(item){   //这里应该有形参传item.id
        
            Dialog.confirm({
            message: '当前店铺状态将变更为休息中，是否继续切换店铺？',
            cancelButtonText:'取消',
            confirmButtonText:'确认退出',
            })
            .then(() => {
                // on confirm
                this.$router.push({ path:'/tar',query:{id:item}})   //跳转到选择的店铺。且当前店铺营业状态更改
            })
            .catch(() => {
            });
        },
        CreateNewStore(){
            this.$router.push({ path:'/ProcessReminder'})
        }
    }

}

</script>


<style scoped>

/* 导航栏背景颜色 */
.van-nav-bar{
background: #f5f5f5;  
}
.box{
        background-color: #f5f5f5;
}
/* 标题部分 */
.text{
    width: 92%;
    margin: 30px auto;
    font-family: '微软雅黑';
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #000000;
}
.text span{
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    color: #333333;
    line-height: normal;

}
.logo{
    width: 23px;
    height: 14px;
}
/* 后端获取到的店铺信息 */

.store{
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 85%;
    background-color: #ffffff;
    margin: 10px auto;
    border-radius: 10px;
    padding: 10px 25px 10px 10px;
}
.imgBox{
    width: 60px;
    height: 60px;
    margin-right: 15px;
}
.store-message{
  /* height: 100%; */
  display: flex;
  flex-direction: column;
justify-content: space-evenly;

}
.shop-name{
font-size: 15px;
text-align: left;
}
.phone{
    margin-top: 5px;
  color: #5e5e5e;
  font-size: 13px;
  text-align: left;
}
.benji{
  position: absolute;
  width: 35px;
  height:20px;
  background-color: #fca190;
  color: #ffffff;
  font-size: 12px;
  border-radius: 0 10px 0 10px;
  text-align: center;
    top: 0;
    right: 0;
}
.prompt{
position: absolute;
bottom: 25px;
font-size: 13px;
color: #999999;
width: 100%;
text-align: center;
}

/* 创建新店部分 */
.CreateNewStore{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 85%;
    background-color: #ffffff;
    margin: 10px auto;
    border-radius: 10px;
    padding: 10px 25px 10px 10px;
}
.addShopImgBox{
    position: relative;
    width: 60px;
    height: 60px;
    margin-right: 15px;
}
.addShop2{
    position: absolute;
    top: 20px;
    left: 20px;
}
.addShopText{
    font-size: 15px;
    text-align: left;
    color: #333333;
    line-height: normal;
}

</style>